<template>
<!--我喜欢的歌曲页-->
  <div class="song" v-if="songInfo">
    <remark/>
    <ul>
      <li v-for="(val,index) in songInfo" :key='index' :class="index%2==0?'evenBackground':''">
        <songName :info='val'/>
      </li>
    </ul>
    
  </div>
</template>

<script>
import require from 'requests/getSong'
import songName from "components/business/songName";
import remark from "components/business/remark";
export default {
  name:'song',
  data(){
    return {
      songInfo:[],
    }
  },
  components:{
    remark,
    songName
  },
  methods: {
    getLikelist() {
      require.likelist(this.$store.state.userId).then(res => {
        res.data.ids.forEach((val)=>{
          //console.log(val)
          this.songDetails(val)
        })
      });
      
    },
    songDetails(id){
      require.songDetails(id).then(res=>{
        this.songInfo.push(res.data)
      })
    }
  },
  mounted() {
    this.getLikelist();
  }
}
</script>

<style scoped>
  .evenBackground {
  background-color: rgba(0, 0, 0, 0.01);
}
</style>